<template>
    <fieldset>
        <legend>产品</legend>
        <h1>{{tag}}</h1>
        <ul>
            <!--13  渲染页面 -->
            <li v-for="item in products" :key="item.id">
            <span>产品名称</span>
            <b>{{item.title}}</b>
            ---
            <span>产品单价</span>
            <b>{{item.price}}</b>
            ---
            <span>库存</span>
            <b>{{item.inventory}}</b>
            ---
            <!-- 15定义一个点击事件 -->    
            <button :disabled="item.inventory == 0" @click="add_to_cart(item)">+点击加入购物车</button>
                            <!-- 27数量没有就禁用 -->
           
            
            </li>
        </ul>
    </fieldset>
</template>
<script>
// import{ mapState} from 'vuex'
//7 引入赋值函数   11引入mapState
import { mapActions ,mapState } from 'vuex'
export default{
computed:{                             //12映射Product模块中的products状态    products模块化里面就是products[]
        ...mapState('Cart',['tag']),
        ...mapState('Products',['products'])
        
    },
    //9 在mounted调用FETCH_PRODUCT方法
    mounted(){
        //加上模块化的名  就会得到带名字模块化的方法
        // this.$store.commit('Product/SET_PRODUCT')
        this.FETCH_PRODUCT()
        // console.log(this);
    },
    methods: {
        //8 映射 调用Productm模块中的actions
        ...mapActions('Products',['FETCH_PRODUCT']),
        //18映射carts
        ...mapActions('Cart',['GET_PRODUCT']),


        //16注册方法
        add_to_cart(item){
            //19 调用了Cart模块的action
            console.log(this);
                this.GET_PRODUCT(item)
        }
    }
}


</script>